<template>
  <div id="consult">
    <group class="new-question">
      <cell title="提交新问题" @click.native="onClick" is-link></cell>
    </group>
    <h3>全部问题</h3>
    <div class="question-detail" v-for="(item,index) in consultlist" :key="index">
      <div v-if="item.flag === 0">
        <group>
          <cell 
          class="state01"
          :title="item.title"
          is-link
          :border-intent="false"
          :arrow-direction="num01 === index ? 'up' : 'down'"
          @click.native="consult01(index)" >
            <div>
              <span >待处理</span>
            </div>
          </cell>
          <p class="time-new">{{item.createTime}}</p>
          <p class="slide" :class="num01 === index?'animate':''">
            <span>{{item.content}}</span>
            <span v-if="item.answerContent"><small>答复：</small><br/>{{item.answerContent}}</span>
          </p>
        </group>
      </div>
      <div v-if="item.flag === 1">
        <group>
          <cell 
          class="state02"
          :title="item.title"
          is-link
          :border-intent="false"
          :arrow-direction="num02 === index ? 'up' : 'down'"
          @click.native="consult02(index)" >
            <div>
              <span >处理中</span>
            </div>
          </cell>
          <p class="time-new">{{item.createTime}}</p>
          <p class="slide" :class="num02 === index?'animate':''">
            <span>{{item.content}}</span>
            <span v-if="item.answerContent"><small>答复：</small><br/>{{item.answerContent}}</span>
          </p>
        </group>
      </div>
      <div v-if="item.flag === 2">
        <group>
          <cell 
          class="state03"
          :title="item.title"
          is-link
          :border-intent="false"
          :arrow-direction="num03 === index ? 'up' : 'down'"
          @click.native="consult03(index)" >
            <div>
              <span >处理完成</span>
            </div>
          </cell>
          <p class="time-new">{{item.createTime}}</p>
          <p class="slide" :class="num03 === index?'animate':''">
            <span>{{item.content}}</span>
            <span v-if="item.answerContent"><small>答复：</small><br/>{{item.answerContent}}</span>
          </p>
        </group>
      </div>
    </div>
    <load-more v-if="moreData"  :show-loading="false" :tip="'暂无数据'"  background-color="#fbf9fe"></load-more>
  </div>
</template>
<script>
import { Cell, Group, LoadMore } from 'vux'
import api from '../../api'
import utils from '../../utils'
export default {
  data () {
    return {
      consultlist: [],
      moreData: false,
      num01: null,
      num02: null,
      num03: null
    }
  },
  components: {
    Cell,
    Group,
    LoadMore
  },
  created () {
    window.document.title = '咨询小蜜'
    var timeStamp = String(Number(new Date()))
    var tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    var params = {
      Tokenuser: tokenval,
      userid: this.$store.state.userID,
      timestamp: timeStamp
    }
    api.consult(params).then(res => {
      console.log(res)
      if (res.status === 200) {
        this.consultlist = res.data.list
        if (this.consultlist.length === 0) {
          this.moreData = true
        } else {
          this.moreData = false
        }
      }
    })
    utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    onClick () {
      window.location.href = '/consult/question'
    },
    consult01 (index) {
      if (this.num01 === index) {
        this.num01 = null
      } else if (this.num01 !== index) {
        this.num01 = index
      }
    },
    consult02 (index) {
      if (this.num02 === index) {
        this.num02 = null
      } else if (this.num02 !== index) {
        this.num02 = index
      }
    },
    consult03 (index) {
      if (this.num03 === index) {
        this.num03 = null
      } else if (this.num03 !== index) {
        this.num03 = index
      }
    }
  }
}
</script>
